<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>算子管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row>
        <el-col :span="2">
          <el-button icon="el-icon-upload" type="primary" @click="addOperator">
            添加算子
          </el-button>
        </el-col>
        <el-col :span="2">
          <el-button icon="el-icon-delete" type="danger" @click="deleteSomeOperators">
            批量删除
          </el-button>
        </el-col>
      </el-row>
      <el-table :data="operatorList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                border
                stripe style="width: 100%" @selection-change="changeSelectedOperators">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column label="算子ID" prop="id" width="200"></el-table-column>
        <el-table-column label="算子名称" prop="operatorName" width="200"></el-table-column>
        <el-table-column label="算子内容" prop="operatorBody" width="200"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="danger" @click="deleteOperator(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination :total="total" background
                     layout="prev, pager, next"
                     @current-change="changeOperatorTablePage">
      </el-pagination>
    </el-card>

    <el-dialog
        :visible.sync="dialogVisible"
        title="添加算子"
        width="50%"
        @close="dialogClosed"
    >
      <!-- 内容主题区域 -->
      <el-form
          ref="ruleFormRef"
          :model="operator"
          :rules="operatorRegisterRules"
          label-position='left'
          label-width="100px"
      >
        <el-form-item label="算子名称" prop="operatorName">
          <el-input v-model="operator.operatorName"></el-input>
        </el-form-item>
        <el-form-item label="算子内容" prop="operatorBody">
          <el-input v-model="operator.operatorBody"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="register">录入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      operatorList: [],
      total: 0,
      dialogVisible: false,
      operator: {
        operatorName: "",
        operatorBody: ""
      },
      operatorRegisterRules: {
        operatorBody: {
          type: "string",
          required: true,
          trigger: "blur",
          message: "请输入算子主体"
        },
        operatorName: {
          type: "string",
          required: true,
          trigger: "blur",
          message: "请输入算子名称"
        }
      },
      currentPage: 1,//当前页数
      pageSize: 10,//1p十个数据
      multipleOperatorSelector: []//批量删除用
    }
  },
  created() {
    this.getOperators()
  },
  methods: {
    async getOperators() {
      // 获取所有算子
      const res = await this.$http.get(`/ope/select-allOpe`)

      if (res.code !== 200) {
        return this.$message.error('获取指标树列表失败')
      }
      this.operatorList = res.data
      this.total = res.data.length
    },
    addOperator() {
      this.dialogVisible = true;
    },
    /**
     * 注册算子信息，必须进行合法校验
     * @returns {Promise<void>}
     */
    async register() {
      await this.$refs.ruleFormRef.validate(async (isValid) => {
        if (!isValid) return
        const res = await this.$http.post('ope/insert-one-ope', this.operator)

        if (res.code === 200) this.$message.success('录入成功')

        this.dialogVisible = false

        await this.getOperators()
      });
    },
    async deleteOperator(operatorId) {
      const res = await this.$http.post(`ope/delete?operatorId=${operatorId}`);
      if (res.code !== 200) {
        return this.$message.error(res.message);
      }
      this.$message.success(res.message);
      await this.getOperators();
    },
    dialogClosed() {
      this.dialogVisible = false;
    },
    changeOperatorTablePage(currentPage) {
      this.currentPage = currentPage;
    },
    /**
     * 处理数据表格的多选和取消，无论是选中还是取消，都会修改列表值
     * @param value
     */
    changeSelectedOperators(value) {
      this.multipleOperatorSelector = value;
    },
    async deleteSomeOperators() {
      const confirmResult = await this.$confirm(
          `此操作将删除${this.multipleOperatorSelector.length}条算子信息，是否继续?`,
          '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      let targetId = [];
      for (let operator of this.multipleOperatorSelector) {
        targetId.push(operator.id);
      }
      const result = await this.$http.post("/ope/delete-some",
          targetId);
      if (result.code !== 200) {
        return this.$message.error(result.message);
      }
      this.$message.success(result.message);
      await this.getOperators();
    }
  }
}
</script>

<style>
.add {
  margin: 10px;
}
</style>